<template>
    <a-tree
        class="a-menu"
        :size="size"
        :items="items"
        :getItemsFunc="getItemsFunc"
        :getKeyFunc="getNameFunc"
        :getIsFolderFunc="getIsFolderFunc"
        :getIsItemOpenedFunc="isItemOpened"
        :style="{ width: `${width}px` }"
    >
        <template v-slot:foldName="{ item, depth, opened }">
            <div class="c-layout-h c-start-center">
                <div class="c-layout-h c-start-center">
                    <div
                        :class="`c-square-${size}`"
                        v-for="n in depth"
                        :key="n"
                    ></div>
                </div>
                <a-button
                    class="c-layout-h c-between-center"
                    :color="color"
                    :size="size"
                    :block="true"
                    :sharp="true"
                    :plain="true"
                    @click="
                        $emit('item-click', item);
                        $emit('fold-click', item);
                        toggleItem(item);
                    "
                >
                    <span>{{ getNameFunc(item) }}</span>
                    <span class="fa fa-fw fa-angle-right" v-if="!opened"></span>
                    <span class="fa fa-fw fa-angle-down" v-else></span>
                </a-button>
            </div>
        </template>
        <template v-slot:file="{ item, depth }">
            <div class="c-layout-h c-start-center">
                <div class="c-layout-h c-start-center">
                    <div
                        :class="`c-square-${size}`"
                        v-for="n in depth"
                        :key="n"
                    ></div>
                </div>
                <a-button
                    :color="color"
                    :size="size"
                    :block="true"
                    :sharp="true"
                    :plain="true"
                    align="left"
                    @click="
                        $emit('item-click', item);
                        $emit('file-click', item);
                    "
                >
                    {{ getNameFunc(item) }}
                </a-button>
            </div>
        </template>
    </a-tree>
</template>

<style lang="scss" scoped>
@import "../scss/vars";
</style>

<script>
import AControlGroup from './AControlGroup.vue'
import AButton from './AButton.vue'
import ATree from './ATree.vue'
export default {
    components: { AControlGroup, AButton, ATree },
    props: {
        color: {
            type: String,
            default: 'default',
        },
        size: {
            type: String,
            default: 'm',
        },
        width: {
            type: Number,
            default: 300
        },
        items: {
            type: Array,
            default: []
        },
        getItemsFunc: {
            type: Function,
            default: a => a.items,
        },
        getNameFunc: {
            type: Function,
            default: a => a.name,
        },
        getIsFolderFunc: {
            type: Function,
            default: a => a.type == 0,
        }
    },
    data() {
        return {
            openedItemSet: new Set()
        }
    },
    methods: {
        toggleItem(item) {
            if (this.isItemOpened(item)) {
                this.openedItemSet.delete(item)
            } else {
                this.openedItemSet.add(item)
            }
        },
        isItemOpened(item) {
            return this.openedItemSet.has(item)
        },
        /**
         * 折叠所有
         */
        foldAll() {
            this.openedItemSet.clear()
        }
    }
}
</script>